<template>
  <div class="accurate">
    <div class="accurate-tab">
      <ul>
        <li
          v-for="(tab, idx) in ['进门考', '讲义', '作业']"
          :key="tab"
          :class="{ 'is_active': currentIndex === idx }"
          :data-index="idx + 1"
          @click="tabClick(idx)"
        >
          <span>{{ tab }}</span>
        </li>
      </ul>
      <el-popconfirm title="是否确定删除备课内容？" @confirm='replayLesson'  v-if="prepareData.status !== 3">
        <template #reference>
          <el-button type="text">重新备课</el-button>
        </template>
      </el-popconfirm>
    </div>
    <div class="accurate-main">
      <div class="accurate-entrance-exam" v-if="currentIndex === 0">
        <EntranceExamComponents />
      </div>
      <div class="accurate-main" v-else-if="currentIndex === 1">
        <AccurateHandoutComponent />
      </div>
      <div class="accurate-main" v-else>
        <HomeworkComponent />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { ref, computed } from 'vue'
import EntranceExamComponents from './entrance-exam.vue'
import AccurateHandoutComponent from './accurate-handout.vue'
import HomeworkComponent from './homework.vue'
import store from './../../store'
import $ from '$'
import { ElMessage } from 'element-plus'
export default {
  components: { EntranceExamComponents, AccurateHandoutComponent, HomeworkComponent },
  setup () {
    let classData = computed(() => store.state.classData)
    let prepareData = computed(() => store.state.prepareData)
    let currentIndex = ref(0)
    const tabClick = (idx) => {
      currentIndex.value = idx
    }
    const replayLesson = () => {
      let params = {
        lessonId: classData.value ? prepareData.value.type === 1 ? prepareData.value.contractId: prepareData.value.lessonId : prepareData.value.id,
        lessonThirdId: prepareData.value.thirdId,
        sourceType: classData.value ? 1 : 2
      }
      $.http.post('/admin/lessonTimes/reLesson', params).then((res) => {
        if (res.result) {
          ElMessage.success('重新备课成功')
          $.emitter.emit('set-current')
        } else {
          ElMessage.warning(res.msg)
        }
      })
    }
    return { tabClick, currentIndex, replayLesson, prepareData }
  }
}
</script>
<style lang="scss" scoped>
  .accurate {
    .accurate-tab {
      margin-bottom: 30px;
      display: flex;
      border-bottom: 1px solid #DEE4F1;
      & > button {
        margin-left: auto;
        margin-right: 10px;
      }
      ul {
        height: 40px;
        display: flex;
        li {
          width: 100px;
          height: 40px;
          padding: 0 10px;
          text-align: center;
          line-height: 40px;
          font-family: #333333;
          font-size: 16px;
          cursor: pointer;
        }
      }
    }
    .accurate-main {
      height: calc(100% - 80px);
      & > div {
        height: 100%;
        // overflow: auto;
      }
    }
  }
  .is_active {
    content: attr(data-index);
    border-bottom: 5px solid #72b22a;
    color: #72b22a;
  }
</style>
